<template>
  <div>
    
        <el-form :inline="true" :model="queryForm" style="text-align: left;">
          <el-form-item label="申请日期">
            <div class="block">
              <el-date-picker
                v-model="queryForm.datefrom"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始日期" 
                :editable="false"
                style="width: 140px"
              ></el-date-picker>
              <span style="margin: 0 5px">至</span>
              <el-date-picker
                v-model="queryForm.dateto"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束日期" 
                :editable="false"
                style="width: 140px"
              ></el-date-picker>
            </div>
          </el-form-item>
          
          <el-form-item label="订餐人">
            <el-input v-model="queryForm.orderpersons" placeholder="请输入订餐人姓名" clearable style="width: 160px"></el-input>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="queryForm" style="text-align: left;">
          <el-form-item label="申请编号">
            <el-input v-model="queryForm.orderid" placeholder="请输入申请编号" clearable style="width: 140px"></el-input>
          </el-form-item>
          
          <el-form-item label="当前状态">
            <el-select 
              v-model="queryForm.state" 
              placeholder="请选择状态" 
              clearable 
              filterable
              style="width: 140px"
            >
              <el-option label="部门经理审核" value="1"></el-option>
              <el-option label="总经理审核" value="2"></el-option>
              <el-option label="审核完成" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getTableData()">查询</el-button>
          </el-form-item>
        </el-form>
  
    <!-- 表格区域 -->
    
        <el-table ref="multipleTable" :data="orderList" height="390px" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="申请编号" width="120">
            <template slot-scope="scope">{{ scope.row.orderid}}</template>
          </el-table-column>
          <el-table-column label="申请日期">
            <template slot-scope="scope">{{ scope.row.ordertime }}</template>
          </el-table-column>
          <el-table-column label="订餐人员" width="150">
            <template slot-scope="scope">{{ scope.row.orderpersons }}</template>
          </el-table-column>
          <el-table-column label="订餐数量">
            <template slot-scope="scope">{{ scope.row.num }}</template>
          </el-table-column>
          <el-table-column label="费用金额">
            <template slot-scope="scope">{{ scope.row.amount }}</template>
          </el-table-column>
          <el-table-column label="订餐状态">
            <template slot-scope="scope">{{ scope.row.state_name }}</template>
          </el-table-column>
        </el-table>
        
        <el-pagination
          background
          @size-change="handleSizeChange"
          style="margin-top: 20px;text-align: right;"
          @current-change="handleCurrentChange"
          :page-sizes="[5,7,10,15]"
          layout="prev, pager, next,total, sizes,jumper"
          :page-size="queryForm.limit"
          :total="total">
        </el-pagination>
  </div>
</template>

<script>
export default {
  name:'historyorders',
  data(){
    return{
      orderList:[],
      checkedOrderList:[],
      queryForm:{
        orderpersons:'',
        orderid:'',
        state:'',
        datefrom:'',
        dateto:'',
        page:1,
        limit:7,
        minstate:1
      },
      total:0,
      visible:false
    }
  },
  methods:{
    handleSelectionChange(val){
      this.checkedOrderList = val
    },
    getTableData(){
      this.$http.post("/getOrderInfo",this.queryForm).then(res => {
        this.orderList = res.data.data
        this.total = res.data.count
      })
    },
    handleSizeChange(val) {
      this.queryForm.limit = val
      this.getTableData()
    },   
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.getTableData()
    }                   
  },
  created(){
    this.getTableData()
  }
}
</script>

<style>

</style>